<template>
  <div class="perm-container">
    <el-card class="box-card" shadow="always">
      <div class="clearfix" slot="header">
        <b style="font-size: 18px">
          <svg-icon icon-class="菜单" />
          {{(menu&&menu.label)?('【'+menu.label+'】'):''}}{{title}}分配
        </b>
      </div>
      <el-row style="margin-bottom: 10px">
        <el-col :span="18">
          <el-tag type="primary" v-if="role">{{ role.name }}</el-tag>
          <el-tag style="margin-left: 5px" type="success" v-if="menu">{{ menu.label }}</el-tag>
          <el-tag style="margin-left: 5px" type="info" v-if="!role">
            <i class="el-icon-info"></i> 请选择角色
          </el-tag>
          <el-tag style="margin-left: 5px" type="info" v-if="!menu">
            <i class="el-icon-info"></i> 请选择菜单
          </el-tag>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button @click="handleSubmit" icon="el-icon-check" type="primary">提交</el-button>
        </el-col>
      </el-row>

      <!-- 数据表格 -->
      <el-table :data="pageList" border ref="multipleTable" v-loading="loading">
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column label="权限名称" prop="name" width="80" />
        <el-table-column label="权限标识" prop="perm" />
      </el-table>

      <pagination
        :limit.sync="pagination.limit"
        :page.sync="pagination.page"
        :total="pagination.total"
        @pagination="handleQuery"
        v-show="pagination.total>0"
      />
    </el-card>
  </div>
</template>

<script>
import Api from '../api'
export default {
  name: 'Permission',
  props: ['type'],
  data() {
    return {
      loading: false,
      ids: [],
      pageList: [],
      pagination: {
        page: 1,
        limit: 10,
        total: 0
      },
      initialCheckedPermissionIds: [],
      title: this.type === 1 ? '路由权限' : '按钮权限',
      menu: undefined,
      role: undefined
    }
  },
  methods: {
    handleQuery() {
      this.loading = true
      const that = this
      Api.getPermissions({
        page: this.pagination.page,
        limit: this.pagination.limit,
        queryMode: 'page',
        menuId: this.menu.id,
        type: this.type
      }).then(data => {
        that.pageList = data.records
        that.pagination.total = data.total
        // 勾选角色已有的权限
        Api.rolePermissionIds({ id: that.role.id, type: that.type }).then(data => {
          this.initialCheckedPermissionIds = data
          if (this.initialCheckedPermissionIds) {
            that.pageList.forEach(row => {
              if (this.initialCheckedPermissionIds.indexOf(row.id) !== -1) {
                this.$refs.multipleTable.toggleRowSelection(row, true)
              }
            })
          }
          this.loading = false
        })
      })
    },
    menuClick(menu, role) {
      if (menu) {
        this.menu = menu
        this.handleQuery()
      } else {
        this.pageList = []
        this.pagination = {
          page: 1,
          limit: 10,
          total: 0
        }
        this.initialCheckedPermissionIds = []
      }
      this.role = role
    },
    handleSubmit: function () {
      const checkedPermissionIds = this.$refs.multipleTable.selection.map(item => item.id)
      // 判断选中权限是否变动
      if (this.initialCheckedPermissionIds.length === checkedPermissionIds.length &&
        this.initialCheckedPermissionIds.sort().every(function (v, i) {
          return v === checkedPermissionIds[i]
        })) {
        this.$message.warning('数据未变动，无需提交保存')
        return
      }
      Api.updateRolePermissionIds({ id: this.role.id, menuId: this.menu.id, type: this.type, permissionIds: checkedPermissionIds }).then(() => {
        this.$message.success('提交成功')
      })
    }
  }
}
</script>

<style scoped>
.perm-container {
  margin-bottom: 20px;
}
</style>
